<template>
    <div class="order_list">
        <!-- 单件 -->
        <extractCode ref="extract" :orderId="orderData.id" @cancelClick="qrcodeCancelClick" v-if="extractCodeType == true"></extractCode>
        <div class="order_list_item" @click="detailsClick">
            <div class="order_list_header">
                <text class="order_list_header_title">{{orderData.itemList[0].name}}</text>
                <text class="order_list_header_status">{{orderData.statusDescr}}</text>
            </div>
            <div class="order_list_content" v-if="orderData.itemList.length ==1" v-for="item in orderData.itemList">
                <div class="order_list_content_img mg-r20">
                    <image style="width:170px;height:170px" :src="item.thumbnail"></image>
                </div>
                <div class="order_list_content_box">
                    <div class="order_list_content_top">
                        <text class="order_list_content_name">{{item.name}}</text>
                        <text class="order_list_content_price"  v-if="item.point>0">兑换券{{item.point | number}}</text>
                       <text class="order_list_content_price"  v-else>¥{{item.price | price}}</text>

                    </div>
                    <div class="order_list_content_bottom">
                        <text class="order_list_content_subtitle">{{item.spec}}</text>
                        <text class="order_list_content_number">x {{item.quantity | number}}</text>
                    </div>
                </div>
            </div>

            <div class="order_list_content" v-if="orderData.itemList.length >1">
                <div class="order_list_content_img mg-r20" v-if="index==0 || index==1" v-for="(item,index) in orderData.itemList">
                    <image style="width:170px;height:170px" :src="item.thumbnail"></image>
                </div>
                <div class="order_list_content_more">
                    <text class="order_item_more_number">共计{{orderData.subQuantity}}件</text>
                    <icon class="order_item_icon" content="ios-arrow-forward"></icon>
                </div>
            </div>

            <div class="order_list_content_information">
                <text class="order_list_content_left">共计{{orderData.subQuantity}}件商品</text>
              <div class="order_price_box" v-if="orderData.subPoint>0">
                <text class="order_price_title">兑换券：</text>
                <text class="order_price_number">{{orderData.subPoint | number}}</text>
              </div>
              <div class="order_price_box" v-else>
                <text class="order_price_title">实付款：</text>
                <text class="order_price_icon">¥</text>
                <text class="order_price_number">{{orderData.amountPayable | price}}</text>
              </div>
            </div>
            <!-- 待付款 -->
            <div class="order_list_botton"
                 v-if="orderData.orderStatus == 0 && orderData.paymentStatus == 0 && orderData.shippingStatus == 0">
                <div class="order_list_botton_gray" @click="cancelOrder(orderData.id)">
                    <text class="order_list_botton_gray_title">取消订单</text>
                </div>
                <div class="order_list_botton_red botton_Bg_Color mg-l20" @click="paymentClick">
                    <text class="order_list_botton_red_title botton_Fz_Color">付款</text>
                </div>
            </div>
            <!-- 待发货 -->
            <div class="order_list_botton"
                 v-if="orderData.paymentStatus == 1 && orderData.shippingStatus == 0 && orderData.orderStatus == 1 && orderData.auctionId == null">
                <div class="order_list_botton_gray"  @click="extractCodeClick(orderData.id)" v-if="orderData.shippingMethod == 1">
                    <text class="order_list_botton_gray_title">显示提货码</text>
                </div>
                <div class="order_list_botton_gray" @click="refund" v-if="!orderData.groupBuyId && orderData.auctionId == null ">
                    <text class="order_list_botton_gray_title">退款</text>
                </div>
                <div class="order_list_botton_red botton_Bg_Color mg-l20" @click="remindShipping">
                    <text class="order_list_botton_red_title  botton_Fz_Color">提醒发货</text>
                </div>
            </div>
            <!-- 待收货 -->
            <div class="order_list_botton"
                 v-if="orderData.paymentStatus == 1 && orderData.shippingStatus == 1 && orderData.orderStatus == 1 && orderData.auctionId == null">
                <div class="order_list_botton_gray"  @click="extractCodeClick(orderData.id)" v-if="orderData.shippingMethod == 1">
                    <text class="order_list_botton_gray_title">显示提货码</text>
                </div>
                <div class="order_list_botton_gray"  @click="lookLogistics" v-if="orderData.shippingMethod != 1">
                    <text class="order_list_botton_gray_title">查看物流</text>
                </div>
                <div class="order_list_botton_gray mg-l20"  @click="refund" v-if="!orderData.groupBuyId">
                    <text class="order_list_botton_gray_title">退货</text>
                </div>
                <div class="order_list_botton_red botton_Bg_Color mg-l20" @click="confirmReceipt">
                    <text class="order_list_botton_red_title  botton_Fz_Color">确认收货</text>
                </div>
            </div>
            <!-- 交易成功 -->
            <div class="order_list_botton"
                 v-if="orderData.paymentStatus == 1 && orderData.shippingStatus == 1 && orderData.orderStatus ==2 && orderData.auctionId == null">
                <div class="order_list_botton_red botton_Bg_Color mg-l20" @click="evaluate">
                    <text class="order_list_botton_red_title  botton_Fz_Color">评价</text>
                </div>
                <div class="order_list_botton_red botton_Bg_Color mg-l20" @click="again" v-if="!orderData.groupBuyId">
                    <text class="order_list_botton_red_title  botton_Fz_Color">再次购买</text>
                </div>
            </div>
            <!-- 交易关闭 -->
            <div class="order_list_botton" v-if="orderData.orderStatus == 3 || orderData.orderStatus == 4">
                <div class="order_list_botton_gray" @click="delClick" v-if="orderData.auctionId == null && orderData.auctionId == null">
                    <text class="order_list_botton_gray_title">删除订单</text>
                </div>
                <div class="order_list_botton_red botton_Bg_Color mg-l20" @click="again" v-if="!orderData.groupBuyId">
                    <text class="order_list_botton_red_title  botton_Fz_Color">再次购买</text>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    import {
        cancel,
        reminder,
        received,
        payment,
        del
    } from '../../api/order.js';
    import {
        submit,
        query
    } from '../../api/payment';
    import {
        buyForOrder
    } from '../../api/cart'
    // const util = require('../../utils/util.js')
    // let app = getApp();
    const pay = app.requireModule("eeui/pay");
    import extractCode from '../extractCode/extractCode.vue'
    export default {
        data() {
            return {
                extractCodeType:false
            }
        },
        props:[
            'orderData'
        ],
        filters:{
            price(value) {
                var toFixedNum = Number(value).toFixed(3);
                var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
                return realVal;
            },
            number(value){
                var toFixedNum = Number(value).toFixed(0);
                return toFixedNum;
            }
        },
        components:{
            extractCode
        },
        methods:{
            detailsClick() {
                var _this = this
                eeui.openPage({
                        pageName: 'componentsOrder',
                        params: this.orderData.id,
                        url: 'root://pages/member/order/details.js',
                        statusBarType: 'immersion',
                        statusBarStyle:false
                    },
                    (result) => {
                        if (result.status == 'stop')  {
                            storage.getItem('order', event => {
                                if (event.data == 'true'){
                                    _this.refreshClick()
                                }
                            })
                            storage.removeItem('order', event => {

                            })
                        }
                    }
                );
            },


            cancelOrder(data) {

                var _this = this
                eeui.confirm({
                    title: "确认取消订单?",
                    message: "取消后可在已关闭订单再次购买？",
                    buttons: ["取消", "确定"]
                }, function (result) {
                    if (result.status == "click" && result.title == "确定") {
                        _this.loadCancel(data)
                    }
                });
            },
            loadCancel(data) {
                var _this = this

                cancel(data).then(
                    res => {

                        if (res.type == 'success') {
                            eeui.toast(res.content)
                            _this.refreshClick()
                        }
                    }
                ).catch(error => {
                    eeui.toast(error.content)
                })
            },
            refund(data) { // 退款
                var _this = this
                eeui.openPage({
                        pageName: 'orderDetails',
                        params: _this.orderData.id,
                        url: 'root://pages/member/order/refund.js',
                        statusBarType: 'immersion',
                        statusBarStyle:false
                    },
                    (result) => {
                        if (result.status == 'stop')  {
                            storage.getItem('order', event => {
                                if (event.data == 'true'){
                                    _this.refreshClick()
                                }
                            })
                            storage.removeItem('order', event => {

                            })
                        }
                    }
                );
            },

            remindShipping(data) { // 提醒发货

                var _this = this
                reminder(_this.orderData.id).then(
                    res => {

                        if (res.type == 'success') {
                            eeui.toast(res.content)
                        }
                    }
                ).catch(error => {
                    eeui.toast(error.content)
                })
            },
            lookLogistics(data) { // 查看物流
                var _this = this
                eeui.openPage({
                        pageName: 'orderDetails',
                        params: _this.orderData.id,
                        url: 'root://pages/member/logistics/list.js',
                        statusBarType: 'immersion',
                        statusBarStyle:false
                    },
                    (result) => {

                    }
                );
            },
            confirmReceipt(data) { // 确认收货

                var _this = this
                eeui.confirm({
                    title: "提示?",
                    message: "是否确认收货？",
                    buttons: ["取消", "确定"]
                }, function (result) {
                    if (result.status == "click" && result.title == "确定") {
                        received(_this.orderData.id).then(
                            res => {
                                if (res.type == 'success') {
                                    eeui.toast(res.content)
                                    _this.refreshClick()
                                }
                            }
                        ).catch(error => {
                            console.log(error)
                        })
                    }
                });
            },
            again() { // 再次购买
                var _this = this
                var product = this.orderData.itemList[0]
                let data = {}
                data.orderId = product.orderId
                data.uuid = _this.getGlobalData().uuid
                buyForOrder(data).then(
                    res => {
                        if (res.type == 'success') {
                            eeui.openPage({
                                url: 'root://pages/goods/submit/index.js',
                                statusBarType: 'immersion',
                                statusBarStyle:false
                            })
                        }
                    }
                ).catch(error => {
                    eeui.toast('服务器开小差了，请重新点击购买')
                })
            },

            evaluate(data) { // 评价
                var _this = this
                eeui.openPage({
                        pageName: 'orderDetails',
                        params: _this.orderData.id,
                        url: 'root://pages/member/order/evaluation.js',
                        statusBarType: 'immersion',
                        statusBarStyle:false
                    },
                    (result) => {
                        if (result.status == 'stop')  {
                            storage.getItem('order', event => {
                                if (event.data == 'true'){
                                    _this.refreshClick()
                                }
                            })
                            storage.removeItem('order', event => {

                            })
                        }
                    }
                );
            },
            refreshClick() {
                this.$emit('refreshClick')
            },
            delClick() {
                var _this = this
                eeui.confirm({
                    title: "提示?",
                    message: "是否确认删除？",
                    buttons: ["取消", "确定"]
                }, function (result) {
                    if (result.status == "click" && result.title == "确定") {
                        del(_this.orderData.id).then(
                            res => {
                                if (res.type == 'success') {
                                    eeui.toast('删除成功')
                                    _this.refreshClick()
                                }
                            }
                        ).catch(error => {
                            console.log(error)
                        })
                    }
                });
            },

            paymentClick() {
                var _this = this
                payment(this.orderData.id).then(res => {
                    console.info(res)
                    if (res.type == 'success') {
                        console.log(res)
                        _this.submitClick(res)
                    } else {
                        eeui.toast('支付失败')
                    }
                }).catch(error => {
                    eeui.toast(error.content)
                })
            },

            submitClick(data) {
                var _this = this
                _this.sn = data.data.sn
                submit({
                    paymentPluginId: 'weixinAppPayPlugin',
                    sn: data.data.sn
                }).then(res => {
                    console.info(res)
                    if (res.type == 'success') {
                        pay.weixin({
                            appid:res.data.appid,
                            partnerid:res.data.partnerid,
                            prepayid:res.data.prepayid,
                            package:res.data.package,
                            noncestr:res.data.noncestr,
                            timestamp:res.data.timestamp,
                            sign:res.data.paySign,
                        }, result=>{
                            console.log(result)
                            if(result.status ==0){
                                _this.refreshClick()
                            }else if(result.status == -1){
                                eeui.toast('服务器出错，请稍后重试')
                            }else if(result.status == -2){
                                eeui.toast('您已取消支付')
                            }else if(result.status == -999){
                                eeui.toast('开启微信失败')
                            }
                        })
                    } else {
                        eeui.toast('支付失败')
                    }
                }).catch(error => {
                    console.log(error)
                    eeui.toast('支付失败')
                })
            },
            extractCodeClick(data){
                console.log(data)
                var _this = this
                this.extractCodeType = !this.extractCodeType
            },
            qrcodeCancelClick(){
                this.extractCodeType = !this.extractCodeType
            },

        }
    }
</script>
<style lang="css" src="../../style/wx.css"/>
<style scoped>
    /*@import '../../style/wx.css'; !*引入公共样式*!*/
    .order_list {
        width: 750px;
        padding-left: 25px;
        padding-right: 25px;
        box-sizing: border-box;
    }

    .order_list_item {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-top: 20px;
        padding: 25px;
        box-sizing: border-box;
    }

    .order_list_header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 650px;
        height: 40px;
    }

    .order_list_header_title {
        font-size: 24px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        width: 520px;
        lines:1;
        text-overflow: ellipsis;
    }

    .order_list_header_status {
        font-size: 24px;
        font-weight: 400;
        color: rgba(215, 38, 28, 1);
    }

    .order_list_content {
        width: 650px;
        display: flex;
        flex-direction: row;
        margin-top: 42px;
        position: relative;
    }

    .order_list_content_img {
        width: 170px;
        height: 170px;
        background: rgba(250, 250, 250, 1);
        border-radius: 4px;
        overflow: hidden;
    }

    .order_list_content_box {
        display: flex;
        flex-direction: column;
    }

    .order_list_content_top {
        width: 460px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .order_list_content_name {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        display: block;
        lines:1;
        width: 300px;
        text-overflow: ellipsis;
    }

    .order_list_content_price {
        font-size: 18px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }

    .order_list_content_bottom {
        width: 460px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .order_list_content_subtitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
        width: 400px;
        text-overflow: ellipsis;
        lines:2;
    }

    .order_list_content_number {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .order_list_content_information {
        width: 650px;
        height: 40px;
        background: rgba(0, 0, 0, 0);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        margin-top: 40px;
    }

    .order_list_content_left {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .order_price_title {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }

    .order_price_icon {
        font-size: 20px;
        font-weight: 400;
        color: #eb594f;
        line-height: 36px;
    }

    .order_price_number {
        font-size: 24px;
        font-weight: 400;
        color: #eb594f;
        line-height: 36px;
    }
    .order_price_box{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .order_list_botton {
        width: 650px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        margin-top: 40px;
    }

    .order_list_botton_gray {
        width: 136px;
        height: 48px;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(126, 128, 136, 0.8);
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 25px;
    }

    .order_list_botton_gray_title {
        font-size: 24px;
        font-weight: 400;
        line-height: 48px;
        color: rgba(26, 26, 30, 0.5);
    }


    .order_list_botton_red {
        width: 136px;
        height: 48px;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.8;
    }

    .order_list_botton_red_title {
        font-size: 24px;
        font-weight: 400;
        line-height: 48px;
        /* color: white; */
    }

    .order_list_content_more {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        right: 0;
        height: 170px;
    }

    .order_item_icon {
        font-size: 36px;
        opacity: 0.3;
        width: 50px;
        height: 50px;
    }

    .order_item_more_number {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
    }

    .mg-l20 {
        margin-left: 20px;
    }

    .mg-r20 {
        margin-right: 20px
    }
</style>
